<template>
  <div id="header">
    <van-row gutter="20">
      <van-col span="8">
        <van-icon name="arrow-left" @click="lastOne" />
      </van-col>
      <van-col span="8" style="font-size: 3.8vw">美团客户端下载</van-col>
      <van-col span="8">
        <van-popover v-model:show="showPopover" :actions="actions">
          <template #reference>
            <van-button type="primary">
              <van-icon name="wap-nav" style="margin-left: 16vw" />
            </van-button>
          </template>
        </van-popover>
      </van-col>
    </van-row>
  </div>
  <div class="main" @click="down"><img src="@/img/xiazai.png" alt="" /></div>
</template>

<script>
import { defineComponent } from 'vue'
import { createApp } from 'vue'
import { Toast } from 'vant'

export default defineComponent({
  data() {
    return {
      showPopover: false,
      actions: [{ text: '首页' }, { text: '我的' }, { text: '搜索' }]
    }
  },
  methods: {
    lastOne() {
      this.$router.go(-1)
    },
    down() {
      const app = createApp()
      app.use(Toast)
      Toast.success('下载成功')
    }
  }
})
</script>

<style lang="scss" scoped>
body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#header {
  height: 13.3vw;
  background: linear-gradient(135deg, #ffd000, #ffbd00);
  font-size: 6.4vw;
  line-height: 13.3vw;
  padding: 0 4vw;
}
.main img {
  width: 100vw;
}
.van-button {
  background: none;
  border: none;
  color: black;
}
.van-icon-wap-nav {
  font-size: 6.4vw;
}
button {
  position: relative;
  top: -2vw;
}
</style>
